<script>
import {mapState} from 'vuex'
import topoUtil from '../util/topo-util';
import {Animate, getAnimate} from "../util/animate";

export default {
  name: 'View',
  props: {
    editMode: {
      type: Boolean,
      default: false
    },
    selected: {
      type: Boolean,
      default: false
    },
    detail: {
      type: Object,
      default: {}
    },
  },
  computed: {
    textAlign: function () {
      if (this.detail.style.textAlign == undefined) {
        return "center";
      } else {
        return this.detail.style.textAlign;
      }
    },
    lineHeight: function () {
      if (this.detail.style.lineHeight == undefined) {
        return this.detail.style.position.h;
      }
      return this.detail.style.lineHeight;
    },
    foreColor: function () {
      return this.detail.style.foreColor + '-' + this.detail.style.lineWidth;
    },
    ...mapState({
      mqttTimer: state => state.topoEditor.mqttTimer,
    }),
  },
  data() {
    return {
      animateView: null,
      paramValue: '',//参数绑定值
      actionValue: '',//动画绑定值
    }
  },
  watch: {
    mqttTimer() {
      this.initData();
    },
    foreColor() {
      try {
        this.onResize();
      } catch (error) {

      }
    }
  },
  mounted() {
    if (this.detail.componentShow.indexOf('动画') > -1 && !this.editMode) {
      this.animationInit();
    }
    setTimeout(() => {
      this.initData();
    }, 1000);
  },
  methods: {
    initData() {
      //设备绑定参数初始化
      if (this.detail.dataBind && this.detail.dataBind.imei != undefined && this.detail.dataBind.paramField != undefined) {
        let paramValue = sessionStorage.getItem(this.detail.dataBind.imei + '-' + this.detail.dataBind.paramField)
        if (typeof this.detail.dataBind.acquisitionFormula == 'string' && this.detail.dataBind.acquisitionFormula && !isNaN(paramValue)) {
          let acquisitionFormula = this.detail.dataBind.acquisitionFormula;
          acquisitionFormula = acquisitionFormula.replace("A", paramValue)
          paramValue = this.topoUtil.checkData(acquisitionFormula)
        }
        if (paramValue != null) {
          this.paramValue = paramValue;
        }
      }

      //动画绑定参数初始化
      if (this.detail.dataAction && this.detail.dataAction.imei != undefined && this.detail.dataAction.paramField != undefined) {
        let actionValue = sessionStorage.getItem(this.detail.dataAction.imei + '-' + this.detail.dataAction.paramField);
        if (actionValue != null) {
          this.actionValue = actionValue;
        }
        if (!isNaN(actionValue)) {
          if (typeof this.detail.dataBind.acquisitionFormula == 'string' && this.detail.dataBind.acquisitionFormula) {
            let acquisitionFormula = this.detail.dataBind.acquisitionFormula;
            acquisitionFormula = acquisitionFormula.replace("A", actionValue)
            actionValue = this.topoUtil.checkData(acquisitionFormula)
          }
          let isGd = topoUtil.judgeSize(this.detail.dataAction.paramJudge, actionValue, this.detail.dataAction.paramJudgeData);
          if (isGd) {
            if (this.detail.dataBind.xyAction) {//显隐判断
              getAnimate().set(document.getElementById(this.detail.identifier), {
                display: 'block'
              })
            }
            if (this.animateView) {
              this.animateView.play();
            }
          } else {
            if (this.detail.dataBind.xyAction) {//显隐判断
              getAnimate().set(document.getElementById(this.detail.identifier), {
                display: 'none'
              })
            }
            if (this.animateView) {
              this.animateView.pause();
            }
          }
        }
      }
      // console.log('mqtt初始化', this.paramValue, this.actionValue);
      //VR参数初始化
      if (this.detail.style.markers) {
        this.detail.style.markers.forEach(element => {
          let paramValue = sessionStorage.getItem(element.dataBind.imei + '-' + element.dataBind.paramField)
          if (typeof this.detail.dataBind.acquisitionFormula == 'string' && this.detail.dataBind.acquisitionFormula && !isNaN(paramValue)) {
            let acquisitionFormula = element.dataBind.acquisitionFormula;
            acquisitionFormula = acquisitionFormula.replace("A", paramValue)
            paramValue = this.topoUtil.checkData(acquisitionFormula)
          }
          if (paramValue != null && this.markersPlugin) {
            let paramName = element.dataBind.paramName;
            let unit = element.dataBind.paramUnit == null ? '' : element.dataBind.paramUnit
            sessionStorage.setItem('ps-marker-' + element.id, paramName + "：" + paramValue + unit)
          }
        });
      }
    },
    animationInit() {
      // console.log('开始初始化动画');
      let domId = document.getElementById(this.detail.identifier);
      let display = 'block';
      let rotate = [];
      let scale = [];
      let translates = [];
      let duration = 1000;
      let autoplay = false;
      let loop = true;
      if (this.detail.dataAction.duration) {
        duration = this.detail.dataAction.duration * 1000
      } else if (this.detail.dataAction.rotationSpeed == '快') {
        duration = 500
      } else if (this.detail.dataAction.rotationSpeed == '中') {
        duration = 1000
      } else if (this.detail.dataAction.rotationSpeed == '慢') {
        duration = 1500
      } else {
        duration = 1000
      }
      if (this.detail.dataBind.xzAction) {//旋转判断
        rotate.push(360)
      } else {
        rotate.push(0)
      }
      if (this.detail.dataBind.ssAction) {//闪烁判断
        scale.push(0.7);
        scale.push(1);
        scale.push(1.3);
        scale.push(1);
      } else {
        scale.push(1);
      }
      if (this.detail.dataBind.hdAction) {//滑动判断
        this.detail.dataAction.translateList.forEach(element => {
          if (element.direction == '竖直') {
            translates.push({translateY: -element.position})
          } else {
            translates.push({translateX: element.position})
          }
        });
      }
      if (translates.length == 0) {
        translates.push({translateX: 0})
      }
      this.animateView = Animate(domId, display, rotate, scale, translates, duration, autoplay, loop)
    },
  }
}
</script>
